<div id="vulnerability-list" v-cloak>

  <div class="container-fluid p-4">
    <div class="d-flex flex-column">
      <div class="pb-0 pb-sm-4">
        <h3 purpose="page-heading">Vulnerabilities</h3>
      </div>
    </div>
    <div class="d-flex flex-sm-row flex-column justify-content-sm-between">
      <div class="d-flex flex-md-row flex-column justify-content-start align-items-md-center">
      <select class="custom-select team-select mr-3" v-model="teamApid" @change="changeFilteredTeam()">
        <option value="undefined" selected>All teams</option>
        <option v-for="option of teamsToDisplay" :value="option.id">{{option.name}}</option>
      </select>
      <a class="mt-md-0 mt-3 btn btn-inline btn-sm btn-primary mr-sm-3 mr-0" @click="clickOpenExportModal()">Export</a>
      </div>
      <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between pt-3 pt-sm-0">
        <div>
          <label class="mb-md-0 mb-3 text-nowrap mr-2">CVSS score is between</label>
        </div>
        <div class="d-flex flex-row align-items-center justify-content-start">
          <select class="custom-select mr-2" v-model="minSeverity" @change="changeMinSeverity()">
            <option v-if="!_.includes(severityFilterOptions, minSeverity)" :value="minSeverity" >{{minSeverity}}</option>
            <option v-for="option of severityFilterOptions" :value="option">{{option}}</option>
          </select>
          <label class="mb-0">and</label>
          <select class="custom-select ml-2" v-model="maxSeverity" @change="changeMaxSeverity()">
            <option v-if="!_.includes(severityFilterOptions, maxSeverity)" :value="maxSeverity">{{maxSeverity}}</option>
            <option v-for="option of severityFilterOptions" :value="option">{{option}}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4 pb-2 pt-4 pt-sm-1" v-if="!cloudError && filteredVulnerabilities.length > 0">
        <p class="text-sm-left text-muted mb-sm-0 pt-sm-3">{{ (currentPageIndex * ENTRIES_PER_PAGE) + 1}}-{{Math.min((currentPageIndex * ENTRIES_PER_PAGE) + ENTRIES_PER_PAGE, totalFilteredVulnerabilities) }} of {{ totalFilteredVulnerabilities }}</p>
      </div>
      <div class="col-sm-2 pb-2 pt-4 pt-sm-1" v-else>
        <p class="text-sm-left text-muted mb-sm-0 pt-sm-3"></p>
      </div>
    </div>
    <div class="mb-4 border rounded table-responsive" v-show="filteredVulnerabilities.length > 0">
      <table class="table my-0">
        <thead>
          <tr>
            <th class="sortable" :class="sortBy === 'cveId' && sortDirection === 'ASC' ? 'ascending' : sortBy === 'cveId' && sortDirection === 'DESC' ? 'descending' : ''" @click="clickSortButton('cveId')">
              <div style="cursor: pointer;" class="d-flex flex-row align-items-center">
                <small><strong>CVE ID</strong></small>
                <div class="sort-arrows">
                  <span class="ascending-arrow"></span>
                  <span class="descending-arrow"></span>
                </div>
              </div>
            </th>
            <th class="sortable" :class="sortBy === 'severity' && sortDirection === 'ASC' ? 'ascending' : sortBy === 'severity' && sortDirection === 'DESC' ? 'descending' : ''" @click="clickSortButton('severity')">
              <div style="cursor: pointer;" class="d-flex flex-row align-items-center" >
                <small><strong>CVSS score</strong></small>
                <div class="sort-arrows">
                  <span class="ascending-arrow"></span>
                  <span class="descending-arrow"></span>
                </div>
              </div>
            </th>
            <th>
              <small><strong>Severity</strong></small>
            </th>
            <th class="sortable" :class="sortBy === 'hasKnownExploit' && sortDirection === 'ASC' ? 'ascending' : sortBy === 'hasKnownExploit' && sortDirection === 'DESC' ? 'descending' : ''" @click="clickSortButton('hasKnownExploit')">
              <div style="cursor: pointer;" class="d-flex flex-row align-items-center" >
                <small><strong>Exploit available</strong></small>
                <div class="sort-arrows">
                  <span class="ascending-arrow"></span>
                  <span class="descending-arrow"></span>
                </div>
              </div>
            </th>
            <th>
              <small><strong>Total affected hosts</strong></small>
            </th>
            <th class="sortable" :class="sortBy === 'createdAt' && sortDirection === 'ASC' ? 'ascending' : sortBy === 'createdAt' && sortDirection === 'DESC' ? 'descending' : ''" @click="clickSortButton('createdAt')">
              <div style="cursor: pointer;" class="d-flex flex-row align-items-center" >
                <small><strong>Detected date</strong></small>
                <div class="sort-arrows">
                  <span class="ascending-arrow"></span>
                  <span class="descending-arrow"></span>
                </div>
              </div>
            </th>
            <th class="sortable" :class="sortBy === 'publishedAt' && sortDirection === 'ASC' ? 'ascending' : sortBy === 'publishedAt' && sortDirection === 'DESC' ? 'descending' : ''" @click="clickSortButton('publishedAt')">
              <div style="cursor: pointer;" class="d-flex flex-row align-items-center" >
                <small><strong>CVE publish date</strong></small>
                <div class="sort-arrows">
                  <span class="ascending-arrow"></span>
                  <span class="descending-arrow"></span>
                </div>
              </div>
            </th>
            <th>
              <span><small><strong>Fix date</strong></small></span>
            </th>
            <th>
              <span><small><strong>Affected teams</strong></small></span>
            </th>
            <th>
              <span><small><strong>Affected software</strong></small></span>
            </th>
            <th>
              <span><small><strong>Resolved in version</strong></small></span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="vulnerability of filteredVulnerabilities" :key="vulnerability.id">
            <td class="cve-id-column"><a style="color: #007697" @click="clickOpenCveModal(vulnerability)">{{vulnerability.cveId}}</a></td>
            <td>{{vulnerability.severity}}</td>
            <td class="severity-badge-column">
              <span class="badge badge-dark" v-if="vulnerability.severity >= 9"><i class="fa fa-exclamation-triangle"></i> Critical</span>
              <span class="badge badge-danger" v-else-if="vulnerability.severity >= 7">High</span>
              <span class="badge badge-warning" v-else-if="vulnerability.severity >= 4">Medium</span>
              <span class="badge badge-secondary" v-else>Low</span>
            </td>
            <td>
              <span class="text-danger text-uppercase" v-if="vulnerability.hasKnownExploit">🚨 Exploit</span>
              <span class="text-muted" v-else>-</span>
            </td>
            <td>
            <a class="affected-host-link" @click="clickAffectedHosts(vulnerability)">{{vulnerability.numAffectedHosts}}</a>
            </td>
            <td>
              <js-timestamp :at="vulnerability.createdAt" format="calendar"></js-timestamp>
            </td>
            <td>
              <js-timestamp :at="vulnerability.publishedAt" format="calendar"></js-timestamp>
            </td>
            <td>
              <js-timestamp :at="vulnerability.resolvedAt" format="calendar" v-if="vulnerability.resolvedAt"></js-timestamp>
              <span class="text-muted" v-else>-</span>
            </td>
            <td>
              <a class="affected-teams-link" v-if="vulnerability.affectedTeams && vulnerability.affectedTeams.length > 0">
                <span class="truncated-affected-tweets" v-if="vulnerability.affectedTeams.length > 1">
                  {{vulnerability.affectedTeams.length}} teams
                  <div class="teams-tooltip">
                    <p v-for="team in vulnerability.affectedTeams" @click="clickChangeAffectedTeam(team)">{{team}}</p>
                  </div>
                </span>
                <span v-else @click="clickChangeAffectedTeam(vulnerability.affectedTeams[0])">
                  {{vulnerability.affectedTeams[0]}}
                </span>
              </a>
              <span v-else><strong>-</strong></span>
            </td>
            <td>
              <span v-if="vulnerability.affectedSoftware">
                <span v-if="vulnerability.affectedSoftware.length > 1">
                  <a class="affected-host-link" @click="clickAffectedSoftware(vulnerability)">
                  {{vulnerability.affectedSoftware.length}} items
                  </a>
                </span>
                <span v-else>
                  <a target="_blank" :href="vulnerability.affectedSoftware[0].url">{{vulnerability.affectedSoftware[0].name}} @ {{vulnerability.affectedSoftware[0].version}}</a>
                </span>
              </span>
              <span v-else><strong>-</strong></span>
            </td>
            <td>
              <span v-if="vulnerability.affectedSoftware">
                <span v-if="vulnerability.affectedSoftware.length > 1">
                  <a class="affected-host-link" @click="clickAffectedSoftware(vulnerability)">
                  Varies
                  </a>
                </span>
                <span v-else-if="vulnerability.affectedSoftware[0].resolvedInVersion">
                  {{vulnerability.affectedSoftware[0].resolvedInVersion}}
                </span>
                <span v-else>-</span>
              </span>
              <span v-else><strong>-</strong></span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-if="filteredVulnerabilities.length < 1 && showNoVulnsFoundMessage">
      <h2 class="px-3 text-center mx-auto pt-5">No vulnerabilities matching the selected filters were found.</h2>
    </div>
    <nav aria-label="vulnerability pages" v-if="!cloudError && pages.length > 1">
      <ul class="pagination justify-content-end">
        <li class="page-item" :class="currentPageIndex === 0? 'disabled' : ''">
          <a aria-label="Previous" class="page-link" @click="clickPageButton(currentPageIndex-1)"><i class="left-arrow"></i><span class="d-none d-md-inline">&nbsp;&nbsp;Previous</span></a>
        </li>
        <li class="page-item" :class="currentPageIndex+1 === page? 'active' : ''" v-for="page of pages">
          <a class="page-link disabled" v-if="page === '...'">{{page}}</a>
          <a class="page-link" @click="clickPageButton(page-1)" v-else>{{page}}</a>
        </li>
        <li class="page-item" :class="currentPageIndex === pages.indexOf(pages[pages.length-1])? 'disabled' : ''">
          <a aria-label="Next" class="page-link" @click="clickPageButton(currentPageIndex+1)"><span class="d-none d-md-inline">Next&nbsp;&nbsp;</span><i class="right-arrow"></i></a>
        </li>
      </ul>
    </nav>
  </div>

  <modal class="example-modal" v-if="modal==='remediation-details'" @opened="openedRemediationModal()" @close="closeModal()" v-cloak>
    <div class="modal-header">
      <h2 class="modal-title">{{selectedVulnerability.cveId}}</h2>
    </div>
    <div class="modal-body">
      <canvas id="remediation-timeline"></canvas>
    </div>
    <p v-if="teamApid !== undefined">(Showing results for the {{teamNameByApid[teamApid]}} team.)</p>
    <div class="d-flex flex-row justify-content-between">
       <small class="text-muted pr-3">First reported: <js-timestamp :at="selectedVulnerability.createdAt"></js-timestamp></small>
    </div>
    <div v-if="affectedHostsForSelectedVuln.length > 0"><p>Affected hosts <a style="cursor: pointer;" class="link ml-2" @click="clickExportOneCveCsv(selectedVulnerability.cveId)">Export CSV</a></p></div>
    <div class="table-responsive-sm border rounded" v-if="affectedHostsForSelectedVuln.length > 0">
      <table class="table mb-0">
        <thead>
          <tr>
            <th>Host</th>
            <th>Affected software</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="host in affectedHostsForSelectedVuln">
            <td><a style="text-decoration: none; border: none;" target="_blank" :href="fleetBaseUrl+'/hosts/'+host.fleetApid">{{host.displayName}}</a></td>
            <td>
              <ul class="pl-3">
                <li v-for="install in host.installsAffectedByThisVulnerability">
                  <a style="text-decoration: none; border: none;" target="_blank" :href="fleetBaseUrl+'/software/'+install.fleetApid">{{install.softwareNameAndVersion}}</a>
                </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
   </modal>

  <modal class="example-modal" v-if="modal==='software-details'" @close="closeModal()" v-cloak>
     <div class="modal-header">
       <h2 class="modal-title">{{selectedVulnerability.cveId}}</h2>
     </div>
     <p class="modal-text">Affected software</p>
     <div class="d-flex flex-row justify-content-between mb-2">
       <small class="text-muted pr-3">First reported: <js-timestamp :at="selectedVulnerability.createdAt"></js-timestamp></small>
    </div>
     <ul>
      <li v-for="software in selectedVulnerability.affectedSoftware">
        <div calss="d-flex flex-row">
        <a style="text-decoration: none" target="_blank" :href="software.url">{{software.name}} @ {{software.version}}</a>
        <p class="mb-0 d-inline">→
          <span v-if="!software.resolvedInVersion" style="color: #8B8FA2;">No patch available</span>
          <span v-else> Upgrade to <strong>{{software.resolvedInVersion}}</strong></span>
        </p>
        </div>
      </li>
     </ul>
   </modal>

  <modal class="example-modal" v-if="modal==='vulnerability-details'" @close="closeModal()" v-cloak>
     <div class="modal-header">
       <h2 class="modal-title">{{selectedVulnerability.cveId}}</h2>
     </div>
     <div class="modal-body">
      <p class="mb-4">{{selectedVulnerability.cveDescription}}</p>
      <div >
      <a target="_blank" :href="selectedVulnerability.additionalDetailsUrl" class="d-flex flex-row align-items-center">Visit NVD page <img src="/images/open-new-tab-15x14@2x.png" alt="An icon to inform users that this link is external" class="external-link-icon"></a>
     </div>
    </div>
   </modal>

  <modal class="example-modal" v-if="modal==='export-csv'" @close="closeModal()" v-cloak>
     <div class="modal-header">
       <h2 class="modal-title">Export vulnerabilities</h2>
     </div>
     <div class="modal-body">
      <ajax-form :handle-submitting="handleSubmittingExportForm" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules">
        <div class="form-group">
          <label for="team-name">Team</label>
          <select id="team-name" class="form-control" v-model="formData.teamApid">
            <option value="undefined" selected>All teams</option>
            <option v-for="option of teamsToDisplay" :value="option.id">{{option.name}}</option>
          </select>
        </div>
        <div class="row">
          <div class="form-group col-6">
          <label for="sort-by">Sort by value</label>
          <select id="sort-by" class="form-control" v-model="formData.sortBy">
            <option value="cveId" selected>CVE ID</option>
            <option value="severity">Severity</option>
            <option value="hasKnownExploit">Has known exploit</option>
            <option value="publishedAt" selected>Publish date</option>
            <option value="resolvedAt" v-if="formData.exportType === 'overview'">Resolve date</option>
          </select>
          </div>
          <div class="form-group col-6">
            <label for="sort-direction">Sort direction</label>
            <select id="min-severity" class="custom-select" v-model="formData.sortDirection">
              <option value="ASC">Ascending</option>
              <option value="DESC" selected>Descending</option>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="form-group col-6">
            <label for="export-min-severity">Min severity</label>
            <select id="export-min-severity" class="custom-select" v-model="formData.minSeverity">
              <option v-for="option of severityFilterOptions" :value="option">{{option}}</option>
            </select>
          </div>
          <div class="form-group col-6">
            <label for="export-max-severity">Max severity</label>
            <select id="export-max-severity" class="custom-select" v-model="formData.maxSeverity">
              <option v-for="option of severityFilterOptions" :value="option">{{option}}</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="exportType">Report type</label>
          <select id="export-type" class="form-control" v-model="formData.exportType">
            <option value="resolvedAndVulnerableInstalls" selected>Current and resolved vulnerable software installs</option>
            <option value="overview">Overview</option>
          </select>
        </div>
        <div class="d-flex flex-row justify-content-start pb-3">
          <div v-if="formData.exportType === 'resolvedAndVulnerableInstalls'">
            <p>A report that contains entries for every vulnerable software installation detected by the Fleet instance, including software that has been uninstalled.</p>
            <p class="mb-1">Columns included in CSV report:</p>
            <ul>
              <li>CVE ID</li>
              <li>Severity</li>
              <li>Has known exploit</li>
              <li>CVE description</li>
              <li>Publish date</li>
              <li>Resolved Date</li>
              <li>Affected software name</li>
              <li>Affected software version</li>
              <li>Resolved in version</li>
              <li>Affected software URL</li>
              <li>Vulnerable software detected on</li>
              <li>Host Fleet URL</li>
              <li>Host display name</li>
              <li>Host team</li>
              <li>Host team ID</li>
            </ul>
          </div>
          <div v-else-if="formData.exportType === 'overview'">
            <p>A report that includes information about every vulnerability reported by Fleet.</p>
            <p class="mb-1">Columns included in CSV report:</p>
            <ul>
              <li>CVE ID</li>
              <li>Severity</li>
              <li>Has known exploit</li>
              <li>CVE description</li>
              <li>Publish date</li>
              <li>Resolved Date</li>
              <li>Number of affected hosts</li>
            </ul>
          </div>
        </div>
        <cloud-error v-if="cloudError === 'emptyExport'">No vulnerabilities matching the provided filters were found.</cloud-error>
        <cloud-error v-else-if="cloudError"></cloud-error>
        <div class="form-group">
          <ajax-button type="submit" class="btn-light btn-lg btn-block">Export CSV</ajax-button>
        </div>
      </ajax-form>
     </div>
   </modal>

   <ajax-overlay :syncing-message="syncingMessage" :syncing="syncing"></ajax-overlay>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
